<template>
  <div class="shoppingcar">
    <div class="shoplist">
      <div class="item" v-for="(item, index) in films" :key="index">
        <el-checkbox
          v-model="ischecked[index]"
          class="checkbox"
          @change="handlecheck(index)"
        ></el-checkbox>
        <img :src="item.film.cover" alt="" />
        <span>《{{ item.film.name }}》</span>
        <div class="itemMsg">
          <span>
            座位:
            <span>{{ item.cart.seats }}</span>
          </span>
          <span>手机号码: {{ item.cart.phone }}</span>
          <span>
            开场时间:
            <span class="start">
              {{ item.arrangement.data }} {{ item.arrangement.startTime }}
            </span>
          </span>
        </div>
        <!-- 金额和删除按钮 -->
        <span>￥{{ item.cart.price }}</span>
        <el-button
          class="delete"
          type="danger"
          icon="el-icon-delete"
          circle
          @click="DeleteFilm(item.cart.id, index)"
        ></el-button>
      </div>
      <!-- 全选框和付款 -->
      <div class="payment">
        <el-checkbox
          @change="allchecked"
          v-model="isallchecked"
          class="allcheck"
        ></el-checkbox>
        <span>全选</span>
        <span>合计:&nbsp;&nbsp;￥{{ totalamount }}</span>
        <el-button type="danger" class="settle" @click="pay"
          >全部结算</el-button
        >

        <!-- 结算弹窗 -->
        <el-dialog
          :center="true"
          title="提示"
          :visible.sync="payConfirm"
          width="30%"
        >
          <span>请您仔细确认订单金额为{{ totalamount }}元，是否继续</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="payConfirm = false">取 消</el-button>
            <el-button
              type="primary"
              @click="
                payConfirm = false;
                QRcode = true;
              "
              >确 定</el-button
            >
          </span>
        </el-dialog>

        <!-- 二维码界面 -->
        <el-dialog title="提示" :visible.sync="QRcode" width="30%">
          <div class="payQRcode">
            <span>假装有二维码</span>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="QRcode = false">取 消</el-button>
            <el-button type="primary" @click="saveMyOrder(2)">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getShoppingcar,
  deleteCartById,
  saveOrder,
  payment,
} from "@/api/user.js";
export default {
  name: "shoppingcar",
  data() {
    return {
      QRcode: false,
      payConfirm: false,
      isallchecked: false,
      ischecked: [],
      films: [
        {
          film: {
            id: "",
            name: "1",
            cover: "",
          },
          arrangement: {
            id: "",
            name: "",
            data: "",
            startTime: "",
          },
          cart: {
            id: "",
            seats: "",
            phone: "",
            price: "",
          },
        },
      ],
    };
  },
  methods: {
    // 查询购物车
    inquireShoppingCar() {
      getShoppingcar(localStorage.getItem("uid")).then((res) => {
        if (res.code === 200) {
          this.films = res.data;
          for (let i = 0; i < res.data.length; i++) {
            this.ischecked[i] = false;
          }
        }
      });
    },
    // 删除购物车
    DeleteFilm(id, index) {
      deleteCartById(id).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          saveOrder(
            localStorage.getItem("uid"),
            this.films[index].cart.phone,
            this.films[index].arrangement.id,
            this.films[index].cart.seats,
            this.films[index].cart.price,
            3
          );
          this.films.splice(index, 1);
          this.ischecked.splice(index, 1);
        } else {
          this.$message({
            message: "删除失败,请检查网络",
            type: "warning",
          });
        }
      });
    },
    // 点击支付
    pay() {
      if (this.totalamount === 0) {
        alert("请选择需要支付的选项");
      } else {
        this.payConfirm = true;
      }
    },

    // 手动全选、全不选
    allchecked() {
      if (this.isallchecked === true) {
        for (var i = 0; i < this.films.length; i++) {
          this.ischecked[i] = true;
        }
      } else {
        for (var i = 0; i < this.films.length; i++) {
          this.ischecked[i] = false;
        }
      }
    },

    // 检查商品是否全选
    handlecheck(index) {
      if (!this.ischecked[index]) {
        this.isallchecked = false;
      } else {
        let temp = true;
        for (let i = 0; i < this.films.length; i++) {
          if (!this.ischecked[i]) {
            temp = this.ischecked[i];
          }
        }
        this.isallchecked = temp;
      }
    },

    // 保存订单
    saveMyOrder: function (status) {
      for (let i = 0; i < this.ischecked.length; i++) {
        if (this.ischecked[i] == true) {
          payment(this.films[i].cart.id).then((res) => {
            if (res.code === 200) {
              if (this.ischecked[i]) {
                deleteCartById(this.films[i].cart.id).then((res) => {
                  if (res.code === 200) {
                    this.films.splice(i, 1);
                    this.ischecked.splice(i, 1);
                  }
                });
                saveOrder(
                  localStorage.getItem("uid"),
                  this.films[i].cart.phone,
                  this.films[i].arrangement.id,
                  this.films[i].cart.seats,
                  this.films[i].cart.price,
                  status
                ).then((res) => {});
              }
              this.$message({
                message: "支付成功",
                type: "success",
              });
            } else {
              this.$message({
                message: "支付失败",
                type: "warning",
              });
            }
          });
        }
      }
      this.QRcode = false;
    },
  },
  mounted() {
    this.inquireShoppingCar();
  },
  computed: {
    totalamount: function () {
      var sum = 0;
      if (this.isallchecked == true) {
        for (var i = 0; i < this.films.length; i++) {
          sum += Number(this.films[i].cart.price);
        }
      } else {
        for (var i = 0; i < this.films.length; i++) {
          if (this.ischecked[i] === true) {
            sum += Number(this.films[i].cart.price);
          }
        }
      }
      return sum;
    },
  },
};
</script>

<style scoped lang="less">
.shoppingcar {
  position: absolute;
  width: 1100px;
  height: 700px;
  overflow: auto;
  .shoplist {
    .item {
      margin: 0 auto;
      margin-top: 10px;
      position: relative;
      height: 145px;
      border: 1px solid gray;
      width: 90%;
      box-shadow: 3px 3px 5px gray;
      img {
        width: 84px;
        position: absolute;
        left: 40px;
        top: 15px;
      }
      .checkbox {
        position: absolute;
        left: 10px;
        top: 65px;
      }
      .itemMsg {
        display: flex;
        flex-direction: column;
        position: absolute;
        left: 150px;
        top: 50px;
      }
      .itemMsg > span {
        margin-top: 3px;
      }
      .start {
        color: red;
      }
      .delete {
        position: absolute;
        top: 55px;
        right: 50px;
      }
    }
    .item > span:nth-child(3) {
      position: absolute;
      left: 140px;
      top: 20px;
      font-size: 20px;
    }
    .item > span:nth-child(5) {
      color: red;
      font-size: 18px;
      position: absolute;
      top: 60px;
      right: 150px;
    }
    .payment {
      margin: 0 auto;
      margin-top: 30px;
      height: 56px;
      width: 90%;
      background-color: gray;
      position: relative;
      .payQRcode {
        background-color: darkgray;
        height: 300px;
        overflow: hidden;
        span {
          display: block;
          margin-top: 140px;
          text-align: center;
        }
      }
      .allcheck {
        position: absolute;
        top: 18px;
        left: 30px;
      }
      span:nth-child(2) {
        position: absolute;
        top: 16px;
        left: 55px;
        font-size: 18px;
      }
      span:nth-child(3) {
        position: absolute;
        top: 16px;
        right: 130px;
        font-size: 18px;
      }
      .settle {
        position: absolute;
        right: 0;
      }
      .el-button {
        height: 100%;
        width: 120px;
      }
    }
  }
}
</style>